<template>
  <div class="page flex-col">
    <div class="group_1 flex-col">
      <div class="box_1 flex-col">
        <div class="group_2 flex-col">
          <div class="box_3 flex-col justify-end">
            <div class="group_4 flex-row">
              <span class="text_9">解密倒计时</span>
              <div class="box_4 flex-col">{{ formattedTime.split(':')[0] }}</div>
              <div class="spit">:</div>
              <div class="box_5 flex-col">{{ formattedTime.split(':')[1] }}</div>
              <div class="spit">:</div>
              <div class="box_6 flex-col">{{ formattedTime.split(':')[2] }}</div>
              <span class="text_10">投资人解密进度</span>
              <div
                class="box_7 flex-col"
                :style="{ width: (32.14 * list.filter(v => v.decryptStatus != 0).length) / list.length + 'vw' }"
              ></div>
              <div
                class="box_8 flex-col"
                :style="{ width: 32.14 * (1 - list.filter(v => v.decryptStatus != 0).length / list.length) + 'vw' }"
              ></div>
              <span class="text_11">{{ list.filter(v => v.decryptStatus != 0).length }}/{{ list.length }}</span>
            </div>
            <div class="group_5 flex-col">
              <div class="block_2 flex-row">
                <div v-for="item in list" class="box_10 flex-col" :key="item.bidderId">
                  <div class="text-wrapper_6 flex-row">
                    <span class="text_16">{{ item.bidderName }}</span>
                    <a-button type="primary" v-if="item.decryptStatus == 0 && roleType === 'SUBJECT'" @click="un(item)"
                      >解密</a-button
                    >
                  </div>
                  <div class="text-wrapper_7 flex-row">
                    <span class="text_17">{{ item.decryptStatus != 0 ? '已解密' : '未解密' }}</span>
                  </div>
                  <div class="block_4 flex-row justify-between">
                    <span class="text_18">投标人解密时间:{{ item.decryptDate }}</span>
                    <img
                      class="label_2"
                      referrerpolicy="no-referrer"
                      src="../../../assets/ps7nbdidkv47vuxj97vs1rtsx4v8so8kj1a2e7313e-331f-40a5-8d21-abdbec8fd5b6.png"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
export default {
  components: {},
  data() {
    return {
      roleType: Vue.ls.get('User-Type'),
      list: [],
      startTime: '2024-12-18 10:00',
      showChange: false,
      remainingTime: 0,
      timer: null,
      constants: {},
    }
  },
  mounted() {
    this.start()
    this.getData()
  },
  computed: {
    formattedTime() {
      const hours = Math.floor(this.remainingTime / 3600)
      const minutes = Math.floor((this.remainingTime % 3600) / 60)
      const seconds = this.remainingTime % 60
      return `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`
    },
  },
  watch: {
    $route(to, from) {
      // console.log(from.path); // 从哪来
      console.log(to.query) // 到哪去
      this.getData()
      this.start()
    },
  },
  methods: {
    un(item) {
      var certKey = 'dsafasdfsadfsadfasdfasfasdfsaf';
      this.$http.post('/exTender/exTenderList/desTenderFile', { tenderListId: item.tenderListId ,certKey :certKey} ).then(r => {
        this.$message.success('解密成功')
        this.getData()
      })
    },
    start() {
      this.$http.post('/exKaibiao/start?bidSectionId=' + this.$route.query.bidSectionId, {}).then(r => {
        if (r.result.status == 1) {
          this.startTime = r.result.decryptEndTime
          this.startCountdown()
        } else {
        }
      })
    },
    getData() {
      this.$http
        .get('/exKaibiao/exTender/decryptList', {
          params: {
            bidSectionId: this.$route.query.bidSectionId,
          },
        })
        .then(r => {
          this.list = r.result
        })
    },
    calculateCountdown() {
      const now = new Date()
      const targetTime = new Date(this.startTime)
      targetTime.setMinutes(targetTime.getMinutes())

      this.remainingTime = Math.max(0, Math.floor((targetTime - now) / 1000))

      if (this.remainingTime === 0) {
        clearInterval(this.timer);
         this.end(); //倒计时结束，自动完成开标结束
      }
    },
    end() {
      this.$http.post('/exKaibiao/complete', { bidSectionId: this.$route.query.bidSectionId }).then(r => {
        if (r && r.success) {
          this.$message.success("操作成功，倒计时已结束");
        } else {
          this.$message.error("操作失败：" + (r.message || "未知错误"));
        }
      }).catch(err => {
        this.$message.error("请求失败：" + err.message);
      });
    },
    padZero(num) {
      return num.toString().padStart(2, '0')
    },
    startCountdown() {
      this.calculateCountdown()
      this.timer = setInterval(this.calculateCountdown, 1000)
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
}
</script>
<style src="./common.css" />

<style scoped>
.page {
  position: relative;
  width: 100vw;
  height: 56.25vw;
  overflow: hidden;
  .group_1 {
    height: 56.25vw;
    background: #fff;
    width: 100vw;
    .box_1 {
      height: 56.25vw;
      width: 100vw;
      .group_2 {
        position: relative;
        width: 100vw;
        height: 56.25vw;
        background: rgb(6, 95, 222);

        .box_3 {
          background-color: rgba(3, 37, 146, 0.68);
          width: 93.75vw;
          height: 45.79vw;
          margin: 3.17vw 0 3.12vw 3.12vw;
          .group_4 {
            position: relative;
            width: 77.77vw;
            height: 3.91vw;
            margin: 1.25vw 0 0 2.86vw;
            .text_9 {
              width: 8.55vw;
              height: 1.78vw;
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 1.87vw;
              font-family: AlibabaPuHuiTi-Regular;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 1.88vw;
              margin-top: 1.05vw;
            }
            .box_4 {
              color: rgba(255, 255, 255, 1);
              font-size: 1.87vw;
              background-color: rgba(6, 95, 221, 1);
              width: 2.92vw;
              height: 3.91vw;
              line-height: 3.91vw;
              margin-left: 1.62vw;
              align-items: center;
              justify-content: center;
            }
            .box_5 {
              color: rgba(255, 255, 255, 1);
              align-items: center;
              justify-content: center;
              font-size: 1.87vw;
              background-color: rgba(6, 95, 221, 1);
              width: 2.92vw;
              height: 3.91vw;
              /*  margin-left: 2.5vw;*/
            }
            .spit {
              width: 2.5vw;
              height: 3.91vw;
              display: flex;
              align-items: center;
              color: rgba(255, 255, 255, 1);
              justify-content: center;
              font-size: 1.87vw;
            }
            .box_6 {
              color: rgba(255, 255, 255, 1);
              font-size: 1.87vw;
              align-items: center;
              justify-content: center;
              background-color: rgba(6, 95, 221, 1);
              width: 2.92vw;
              height: 3.91vw;
              /*   margin-left: 2.5vw;*/
            }
            .text_10 {
              width: 11.93vw;
              height: 1.78vw;
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 1.87vw;
              font-family: AlibabaPuHuiTi-Regular;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 1.88vw;
              margin: 1.25vw 0 0 4.53vw;
            }
            .box_7 {
              background-color: rgba(255, 207, 14, 1);
              width: 11.93vw;
              height: 0.37vw;
              margin: 1.97vw 0 0 2.78vw;
            }
            .box_8 {
              background-color: rgba(6, 95, 221, 1);
              width: 20.21vw;
              height: 0.37vw;
              margin-top: 1.98vw;
            }
            .text_11 {
              width: 3.34vw;
              height: 1.41vw;
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 1.87vw;
              font-family: AlibabaPuHuiTi-Regular;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 1.88vw;
              margin: 1.1vw 0 0 2.29vw;
            }
          }
          .group_5 {
            background-color: rgba(1, 55, 180, 1);
            position: relative;
            width: 87.97vw;
            height: 39.02vw;
            margin: 1.61vw 0 0 2.91vw;
            .block_1 {
              background-color: rgba(6, 95, 221, 1);
              width: 87.97vw;
              height: 0.06vw;
              margin-top: 7.61vw;
            }
            .block_2 {
              width: 81.36vw;
              height: 8.29vw;
              margin: 4.09vw 0 0 1.9vw;

              .box_10 {
                background-color: rgba(255, 255, 255, 1);
                height: 8.29vw;
                margin-left: 1.41vw;
                width: 19.28vw;
                .text-wrapper_6 {
                  width: 12.31vw;
                  height: 1.2vw;
                  margin: 1.25vw 0 0 1.25vw;
                  align-items: center;
                  .text_16 {
                    white-space: nowrap; /* 防止文本换行 */
                    overflow: hidden; /* 隐藏溢出的内容 */
                    text-overflow: ellipsis; /* 溢出部分用省略号表示 */
                    margin-right: 10px;
                    width: 12vw;
                    height: 1.2vw;
                    overflow-wrap: break-word;
                    color: rgba(51, 51, 51, 1);
                    font-size: 1.25vw;
                    font-family: AlibabaPuHuiTi-Bold;
                    font-weight: 700;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 1.25vw;
                  }
                }
                .text-wrapper_7 {
                  width: 2.45vw;
                  height: 0.89vw;
                  margin: 0.98vw 0 0 1.25vw;
                  .text_17 {
                    width: 2.45vw;
                    height: 0.89vw;
                    overflow-wrap: break-word;
                    color: rgba(6, 95, 221, 1);
                    font-size: 0.93vw;
                    font-family: AlibabaPuHuiTi-Regular;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 0.94vw;
                  }
                }
                .block_4 {
                  width: 17.82vw;
                  height: 2.35vw;
                  margin: 1.19vw 0 0.41vw 1.19vw;
                  .text_18 {
                    width: 13.18vw;
                    height: 0.84vw;
                    overflow-wrap: break-word;
                    color: rgba(102, 102, 102, 1);
                    font-size: 0.83vw;
                    font-family: AlibabaPuHuiTi-Regular;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 0.84vw;
                    margin-top: 0.11vw;
                  }
                  .label_2 {
                    width: 2.5vw;
                    height: 2.35vw;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
